<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>钢蛋音乐</title>
    <link rel="stylesheet" href="index1.css">
</head>

<body>
    <ul id="one">
        <li><img src="./img/1.png"></li>
        <li>
            <h1>钢蛋音乐</h1>
        </li>
        <li><a class="a" href="javascript:void(0)">发现音乐</a></li>
        <li><a href="javascript:void(0)" class="a">我的音乐</a></li>
        <li><a href="javascript:void(0)" class="a">关注</a></li>
        <li><a href="javascript:void(0)" class="a">商城</a></li>
        <li><a href="javascript:void(0)" class="a">音乐人</a></li>
        <li><a href="javascript:void(0)" class="a">下载客户端</a></li>
        <li>
            <div id="search">
                <input type="text" value="搜索：">
            </div>
        </li>
        <li><a href="javascript:void(0)" class="a">创作者中心</a></li>
        <li><a href="javascript:void(0)" class="a">登录</a></li>

    </ul>


    <ul id="two">

        <li class="l"><a class="b" href="javascript:void(0)">推荐</a></li>
        <li><a class="b" href="javascript:void(0)">排行榜</a></li>
        <li><a class="b" href="javascript:void(0)">歌单</a></li>
        <li><a class="b" href="javascript:void(0)">主播电台</a></li>
        <li><a class="b" href="javascript:void(0)">歌手</a></li>
        <li><a class="b" href="javascript:void(0)">新碟上架</a></li>

    </ul>
    <p style="text-align: center; margin-top: 0 ;"><img src="./img/2.jpg" class="img" id="img"></p>
    <a href="javascript:void(0)"><img src="./img/40.png" class="bim1" onclick="fun1()" id="bun1"></a>
    <a href="javascript:void(0)"><img src="./img/41.png" class="bim2" onclick="fun2()" id="bun2"></a>
    <div id="three">
        <ul class="five">
            <li><img src="./img/2.png" class="img1"></li>
            <li>
                <h2>热门推荐</h2>
            </li>
            <li><a href="javascript:void(0)" class="o">华语</a></li>

            <li><a href="javascript:void(0)" class="o">流行</a></li>

            <li><a href="javascript:void(0)" class="o">民谣</a></li>

            <li><a href="javascript:void(0)" class="o">摇滚</a></li>

            <li><a href="javascript:void(0)" class="o">电子</a></li>
            <li><a href="javascript:void(0)" class="p">更多</a></li>

        </ul>
        <table>
            <tr>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/7.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br>戳爷/黄老板/断眉/萌<br>德/骚姆/比伯/烟卷</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/8.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br>看书刷题+纯音乐【学<br>习专用】</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/9.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br>华语民谣 I 孤独的心<br>诠释诗意和远方</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/10.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br> 月亮背面，是我宇宙<br>级的孤独</a></td>
            </tr>
            <tr>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/11.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br>Future Beats ◐ 糟糕<br>，是心肌梗塞的感觉<br>！</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/12.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br> 老祖宗她是真的狂-0<br>01-穿成了老祖宗（<br>求订阅！求关注！...</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/13.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br>【万评电音】抬头<br>，已是一片星海</a></td>
                <td class="td1"><a href="javascript:void(0)"><img src="./img/14.jpg" class="img2"></a><a
                        href="javascript:void(0)" class="yl">
                        <br> 爱能克服远距离</a></td>


            </tr>
        </table>


        <ul class="five">
            <li><img src="./img/2.png" class="img1"></li>
            <li>
                <h2>新碟上架</h2>
            </li>
            <li><a href="javascript:void(0)" class="p1">更多</a></li>

        </ul>
        <div class="bg1">
            <table>
                <tr>
                    <td class="td2"><a href="javascript:void(0)"><img src="./img/15.jpg" class="img3"></a><a
                            href="javascript:void(0)" class="yl">
                            <br>冷暖迁徙 <br>kKzk赵珂</a></td>
                    <td class="td2"><a href="javascript:void(0)"><img src="./img/16.jpg" class="img3"></a><a
                            href="javascript:void(0)" class="yl">
                            <br>MeAgainst The<br> World Melo</a></td>
                    <td class="td2"><a href="javascript:void(0)"><img src="./img/17.jpg" class="img3"></a><a
                            href="javascript:void(0)" class="yl">
                            <br>无归属的她<br>祁紫檀</a></td>
                    <td class="td2"><a href="javascript:void(0)"><img src="./img/18.jpg" class="img3"></a><a
                            href="javascript:void(0)" class="yl">
                            <br>启示录<br>G.E.M.邓紫棋</a></td>
                    <td class="td2"><a href="javascript:void(0)"><img src="./img/19.jpg" class="img3"></a><a
                            href="javascript:void(0)" class="yl">
                            <br>Autofiction<br>Suede</a></td>
                </tr>
            </table>
        </div>
        <ul class="five">
            <li><img src="./img/2.png" class="img1"></li>
            <li>
                <h2>榜单</h2>
            </li>
            <li><a href="javascript:void(0)" class="p1">更多</a></li>
        </ul>
        <div class="bg2">
            <table class="tab1">
                <tr class="th1">
                    <td class="td4"><a href="javascript:void(0)"><img src="./img/21.png" class="img4"></a><a
                            href="javascript:void(0)" class="yl1">
                            飙升榜</a></td>
                    <td class="td4"><a href="javascript:void(0)"><img src="./img/22.png" class="img4"></a><a
                            href="javascript:void(0)" class="yl1">
                            新歌榜</a></td>
                    <td class="td4"><a href="javascript:void(0)"><img src="./img/23.png" class="img4"></a><a
                            href="javascript:void(0)" class="yl1">
                            原创榜</a></td>
                </tr>
                <tr>
                    <td class="td4">1&emsp;<a href="javascript:void(0)" class="yl">荔枝</a></td>
                    <td class="td4">1&emsp;<a href="javascript:void(0)" class="yl">我在等 · 2022</a></td>
                    <td class="td4">1&emsp;<a href="javascript:void(0)" class="yl">我爱上遗憾的原因</a></td>
                </tr>
                <tr class="th1">
                    <td class="td4">2&emsp;<a href="javascript:void(0)" class="yl">暧昧三十三天</a></td>
                    <td class="td4">2&emsp;<a href="javascript:void(0)" class="yl">暧昧三十三天</a></td>
                    <td class="td4">2&emsp;<a href="javascript:void(0)" class="yl">老银</a></td>
                </tr>
                <tr>
                    <td class="td4">3&emsp;<a href="javascript:void(0)" class="yl">谁会被吻</a></td>
                    <td class="td4">3&emsp;<a href="javascript:void(0)" class="yl">100</a></td>
                    <td class="td4">3&emsp;<a href="javascript:void(0)" class="yl">暗里着迷</a></td>
                </tr>
                <tr class="th1">
                    <td class="td4">4&emsp;<a href="javascript:void(0)" class="yl">深海回响</a></td>
                    <td class="td4">4&emsp;<a href="javascript:void(0)" class="yl">美丽心灵</a></td>
                    <td class="td4">4&emsp;<a href="javascript:void(0)" class="yl">海阔天空</a></td>
                </tr>
                <tr>
                    <td class="td4">5&emsp;<a href="javascript:void(0)" class="yl">夏夜最后的烟火</a></td>
                    <td class="td4">5&emsp;<a href="javascript:void(0)" class="yl">雁书</a></td>
                    <td class="td4">5&emsp;<a href="javascript:void(0)" class="yl">World</a></td>
                </tr>
                <tr class="th1">
                    <td class="td4">6&emsp;<a href="javascript:void(0)" class="yl">夜车</a></td>
                    <td class="td4">6&emsp;<a href="javascript:void(0)" class="yl">荔枝</a></td>
                    <td class="td4">6&emsp;<a href="javascript:void(0)" class="yl">回到</a></td>
                </tr>
                <tr>
                    <td class="td4">7&emsp;<a href="javascript:void(0)" class="yl">度过此刻</a></td>
                    <td class="td4">7&emsp;<a href="javascript:void(0)" class="yl">无数</a></td>
                    <td class="td4">7&emsp;<a href="javascript:void(0)" class="yl">饕</a></td>
                </tr>
                <tr class="th1">
                    <td class="td4">8&emsp;<a href="javascript:void(0)" class="yl">我在等</a></td>
                    <td class="td4">8&emsp;<a href="javascript:void(0)" class="yl">如果突然想起我</a></td>
                    <td class="td4">8&emsp;<a href="javascript:void(0)" class="yl">面纱</a></td>
                </tr>
                <tr>
                    <td class="td4">9&emsp;<a href="javascript:void(0)" class="yl">Hold My Hand </a></td>
                    <td class="td4">9&emsp;<a href="javascript:void(0)" class="yl">度过此刻</a></td>
                    <td class="td4">9&emsp;<a href="javascript:void(0)" class="yl">一百万首情歌</a></td>
                </tr>
                <tr class="th1">
                    <td class="td4"><a href="javascript:void(0)" class="yl">查看全部>> </a></td>
                    <td class="td4">;<a href="javascript:void(0)" class="yl">查看全部>></a></td>
                    <td class="td4"><a href="javascript:void(0)" class="yl">查看全部>></a></td>
                </tr>

            </table>

        </div>

    </div>
    <div id="four">
        <div class="bg3">
            <p style=" margin:20px 20px;
float: left;
font-weight: lighter;">
                登录钢蛋音乐，可享受无限收藏的<br>&emsp;乐趣，并无限同步到手机
                <button class="bun3">用户登录</button>
            </p>
        </div>
        <div class="bg4">
            <div class="bg5">
                <ul class="dh">
                    <li style="font-style:italic;
margin-top: 20px">入驻歌手</li>
                    <li style="color: #111111;
        margin-top: 20px;
        margin-left: 90px;
         font-weight: lighter;">
                        <a href="javascript:void(0)" class="yl">查看全部>></a>
                    </li>
                </ul>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg6">
                        <img src="./img/24.jpg" style=" float: left ; width: 70px;height: 70px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ;">吴莫愁</h5>
                    </div>
                </a>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg6">
                        <img src="./img/25.jpg" style=" float: left ;width: 70px;height: 70px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ;">张惠妹</h5>
                    </div>
                </a>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg6">
                        <img src="./img/26.jpg" style="float: left ;  width: 70px;height: 70px;object-fit: cover;">
                        <h5 style="float: left;margin-left:30px ;">孙楠</h5>
                    </div>
                </a>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg6">
                        <img src="./img/27.jpg" style="float: left ;  width: 70px;height: 70px;object-fit: cover;">
                        <h5 style="float: left;margin-left:30px ;">麦田老狼</h5>
                    </div>
                </a>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg6">
                        <img src="./img/28.jpg" style="float: left ;  width: 70px;height: 70px;object-fit: cover;">
                        <h5 style="float: left;margin-left:30px ;">舒志伟</h5>
                    </div>
                </a>
                <button class="bun4">
                    <font color="black">申请成为网易音乐人</font>
                </button>
                <ul class="dh">
                    <li style="font-style:italic;margin-top: 20px">热门主播</li>
                </ul>
                <a href="javascript:void (0)" class="yl">
                    <div class="bg7">
                        <img src="./img/29.jpg" style=" float: left ; width: 50px;height: 50px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ; margin-top: 0">疯狂小扬哥</h5>
                        <br>
                        <font size="3px" style="float: right;margin-top:-15px;margin-right: 60px">搞笑专家 抖音博主</font>
                    </div>
                </a> <a href="javascript:void (0)" class="yl">
                    <div class="bg7">
                        <img src="./img/30.jpg" style=" float: left ; width: 50px;height: 50px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ; margin-top: 0">薛之谦</h5>
                        <font size="3px" style="float: right;margin-top:-15px;margin-right: 60px">音乐鬼才 搞笑博主</font>
                    </div>
                </a> <a href="javascript:void (0)" class="yl">
                    <div class="bg7">
                        <img src="./img/31.jpg" style=" float: left ; width: 50px;height: 50px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ;margin-top: 0">郭聪明</h5>
                        <font size="3px" style="float: right;margin-top:-15px;margin-right: 60px">搞怪歌手 抖音博主</font>
                    </div>
                </a> <a href="javascript:void (0)" class="yl">
                    <div class="bg7">
                        <img src="./img/32.jpg" style=" float: left ; width: 50px;height: 50px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ;margin-top: 0">吴磊</h5>
                        <font size="3px" style="float: right;margin-top:-15px;margin-right: 100px">超新星 硬汉</font>
                    </div>
                </a> <a href="javascript:void (0)" class="yl">
                    <div class="bg7">
                        <img src="./img/33.jpg" style=" float: left ; width: 50px;height: 50px;object-fit: cover;">
                        <h5 style="float:left;margin-left:30px ;margin-top: 0">赵露思</h5>
                        <font size="3px" style="float: right;margin-top:-15px;margin-right: 80px">超新星 搞怪女</font>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div id="six">
        <div class="bg8">
            <ul class="six">
                <li><a href="javascript:void(0)" class="p2">服务条款</a></li>
                <li><a href="javascript:void(0)" class="p2">隐私政策</a></li>
                <li><a href="javascript:void(0)" class="p2">版权投诉</a></li>
                <li><a href="javascript:void(0)" class="p2">投资者关系</a></li>
                <li><a href="javascript:void(0)" class="p2">广告合作</a></li>
                <li><a href="javascript:void(0)" class="p2">廉政举报</a></li>
                <li><a href="javascript:void(0)" class="p2">联系我们</a></li>
            </ul>
            <p style="font-size: 13px;
                font-weight: 100;margin-left:10px ">
                钢蛋公司版权所有©1997-2022杭州乐读科技有限公司运营：<a href="javascript:void(0)" class="j">浙网文[2021] 1186-054号
                    粤<br><br>B2-20090191-18 工业和信息化部备案管理系统网站 </a>
                <img src="./img/34.png" style="width: 18px;height: 18px;object-fit: cover;">
                <a href="javascript:void(0)" class="j">赣公网安备 33010902002564号</a><br><br>
                互联网宗教信息服务许可证：浙（2022）0000120 监督举报邮箱：51jubao@service.netease.com

            </p>
        </div>
        <div class="bg9">
            <a href="javascript:void(0)"> <img src="./img/35.png"
                    style="width: 70px;height: 70px;object-fit: cover;margin-top: 45px;margin-left:10px"></a>
            <p style="margin-top: 0px;position: absolute;font-size: 13px; font-weight: 100;">Amped studio</p>
            <a href="javascript:void(0)"> <img src="./img/36.png"
                    style="width: 70px;height: 70px;object-fit: cover;margin-top: 45px ;margin-left:40px"></a>
            <p style="margin-top: 0px;position: absolute;font-size: 13px; font-weight: 100; margin-left: 135px">用户认证</p>
            <a href="javascript:void(0)"><img src="./img/37.png"
                    style="width: 70px;height: 70px;object-fit: cover;margin-top: 45px;margin-left:40px"></a>
            <p style="margin-top: 0px;position: absolute;font-size: 13px; font-weight: 100;margin-left: 240px">独立音乐人</p>
            <a href="javascript:void(0)"><img src="./img/38.png"
                    style="width: 70px;height: 70px;object-fit: cover;margin-top: 45px;margin-left:40px"></a>
            <p style="margin-top: 0px;position: absolute;font-size: 13px; font-weight: 100;margin-left: 375px">赞 赏</p>
            <a href="javascript:void(0)"><img src="./img/39.png"
                    style="width: 70px;height: 70px;object-fit: cover;margin-top: 45px;margin-left:40px"></a>
            <p style="margin-top: 0px;position: absolute;font-size: 13px; font-weight: 100;margin-left: 480px">视频奖励</p>
        </div>

    </div>


    <script>
        var index = 2;
        var a = document.getElementById("img");
        function fun() {
            if (index == 5) {
                index = 2;
            }
            a.src = "./img/" + index + ".jpg";
            index++;

        }
        setInterval(fun, 3000);
        function fun1() {
            index++;
            if (index == 5) {
                index = 2;
            }
            a.src = "./img/" + index + ".jpg";
        } function fun2() {
            index--;
            if (index == 1) {
                index = 4;
            }
            a.src = "./img/" + index + ".jpg";

        }


    </script>
</body>

</html>